<nz-card>
    <div nz-row [nzGutter]="8">
        <div nz-col nzSpan="4">
            <ul nz-menu nzMode="inline" class="card-height">
                <li nz-menu-item [nzSelected]="idx === 0" (click)="changeType(idx)"
                    *ngFor="let item of tabs; let idx = index">
                    {{ item.name }}
                </li>
            </ul>
        </div>

        <div nz-col nzSpan="20" style="overflow: scroll">
            <nz-card class="card-height" [nzBordered]="null" nzSize="small" *ngIf="selectedTab===0 ">
                <h2 style="font-weight: 800;">货主端配置</h2>
                <h3 style="font-weight: 600;margin-left: 120px;">图片配置</h3>
                <sf style="margin-left: 30px" #sf mode="default" [formData]="i" [schema]="schema2"
                    [ui]="{ '*': { spanLabelFixed: 200,grid: { span: 24 }} }" button="none">
                    <ng-template sf-template="start" let-me let-ui="ui" let-schema="schema">
                    </ng-template>
                    <template id="tpl">
                        <span>so good </span>
                    </template>
                    <ng-template sf-template="time2" let-me let-ui="ui" let-schema="schema">
                        <div class="text-left">可输入字符</div>
                        <nz-range-picker extend nzFormat="HH:mm:ss"></nz-range-picker>
                    </ng-template>
                </sf>
                <h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">短信配置</h3>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24" se-container [labelWidth]="230" [se-container]="1">
                        <se label="短信内容设置" style="margin-bottom: 0;">
                            <p style="margin-top: 6px;">配置用户端登陆页注册帐号、修改密码、修改手机号时的短信内容</p>
                            <textarea nz-input rows="4"
                                placeholder="【运多星】您的验证码：XXXXXX。有效期10分钟，请及时输入，请勿向他人泄露您的验证码。如非本人操作，请忽略。"
                                style="width: 400px;"></textarea>
                        </se>
                    </div>
                </div>
                <h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">通知配置</h3>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24">
                        <ng-container *ngTemplateOutlet="textMessage;context:{$implicit: 'World', title:'用户实名认证审核'}">
                        </ng-container>
                        <ng-container *ngTemplateOutlet="textMessage;context:{$implicit: 'World', title: '企业认证审核'}">
                        </ng-container>
                    </div>
                </div>
                <h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">客服电话配置</h3>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24" se-container [labelWidth]="230">
                        <se label="客服电话" style="margin-bottom: 0;">
                            <input nz-input style="width: 325px;" />
                        </se>
                    </div>
                </div>
            </nz-card>

            <nz-card class="card-height" [nzBordered]="null" nzSize="small" *ngIf="selectedTab===1">
                <h2 style="font-weight: 800;">司机端配置</h2>
                <h3 style="font-weight: 600;margin-left: 120px;">图片配置</h3>
                <sf style="margin-left: 30px" #sf mode="default" [formData]="i" [schema]="schema"
                    [ui]="{ '*': { spanLabelFixed: 200,grid: { span: 24 }} }" button="none">
                    <ng-template sf-template="start" let-me let-ui="ui" let-schema="schema">
                    </ng-template>
                    <template id="tpl">
                        <span>so good </span>
                    </template>
                    <ng-template sf-template="time2" let-me let-ui="ui" let-schema="schema">
                        <div class="text-left">可输入字符</div>
                        <nz-range-picker extend nzFormat="HH:mm:ss"></nz-range-picker>
                    </ng-template>
                </sf>
                <h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">短信配置</h3>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24" se-container [labelWidth]="230" [se-container]="1">
                        <se label="短信内容设置" style="margin-bottom: 0;">
                            <p style="margin-top: 6px;">配置用户端登陆页注册帐号、修改密码、修改手机号时的短信内容</p>
                            <textarea nz-input rows="4"
                                placeholder="【运多星】您的验证码：XXXXXX。有效期10分钟，请及时输入，请勿向他人泄露您的验证码。如非本人操作，请忽略。"
                                style="width: 400px;"></textarea>
                        </se>
                    </div>
                </div>
                <h3 style="font-weight: 600;margin-left: 140px;" class="mb-md">通知配置</h3>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24">
                        <ng-container *ngTemplateOutlet="textMessage;context:{$implicit: 'World', title:'司机实名认证审核'}">
                        </ng-container>
                        <ng-container *ngTemplateOutlet="textMessage;context:{$implicit: 'World', title: '司机驾驶证证审核'}">
                        </ng-container>
                        <div se-container [labelWidth]="230" [se-container]="1">
                            <se class="mb-sm">
                                <nz-radio-group [(ngModel)]="formDate.isAudit">
                                    <label nz-radio [nzValue]="false" class="mt-sm">到期系统通知</label>
                                    <label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
                                </nz-radio-group>
                            </se>
                            <se label="司机驾驶证证审核" class="mb-sm">
                                <nz-radio-group [(ngModel)]="formDate.isAudit">
                                    <label nz-radio [nzValue]="false" class="mt-sm">审核通过系统通知</label>
                                    <label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
                                </nz-radio-group>
                            </se>
                            <se class="mb-sm">
                                <nz-radio-group [(ngModel)]="formDate.isAudit">
                                    <label nz-radio [nzValue]="false" class="mt-sm">审核驳回系统通知</label>
                                    <label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
                                </nz-radio-group>
                            </se>
                            <se class="mb-sm">
                                <nz-radio-group [(ngModel)]="formDate.isAudit">
                                    <label nz-radio [nzValue]="false" class="mt-sm">到期系统通知</label>
                                    <label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
                                </nz-radio-group>
                            </se>
                        </div>
                    </div>
                </div>
                <h3 style="font-weight: 600;margin-left: 140px;" class="mt-md">客服电话配置</h3>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24" se-container [labelWidth]="230">
                        <se label="客服电话" >
                            <input nz-input style="width: 325px;" />
                        </se>
                    </div>
                </div>
                <h3 style="font-weight: 600;margin-left: 140px;" class="mt-md">证件提醒配置</h3>
                <div nz-row nzGutter="8">
                    <div nz-col nzSpan="24" se-container [labelWidth]="230" [se-container]="1">
                        <se label="证件临期提醒" style="margin-bottom: 0;">
                            距离到期时间
                            <input type="number" nz-input  style="width: 40px;"/>
                            天开始提醒，每隔
                            <input type="number" nz-input  style="width: 40px;" />
                            天提醒一次
                        </se>
                    </div>
                </div>
            </nz-card>

            <div class="mb-md save-btn">
                <button class="ml-lg" nz-button nzSize="large" nzType="primary">保存</button>
                <button class="ml-lg" nz-button nzSize="large">取消</button>
            </div>
        </div>
    </div>
</nz-card>

<ng-template #textMessage let-data="data" let-title="title">
    <div se-container [labelWidth]="230" [se-container]="1">
        <se [label]="title" style="margin-bottom: 0;">
            <nz-radio-group [(ngModel)]="formDate.isAudit">
                <label nz-radio [nzValue]="false" class="mt-sm">审核通过系统通知</label>
                <label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
            </nz-radio-group>
        </se>
        <se class="mb-sm">
            <label for="">通知标题 : </label>
            <input nz-input placeholder="请不要超过20个汉字" style="width: 325px;" maxlength="20" />
        </se>
        <se class="mb-sm">
            <label for="">通知内容 : </label>
            <input nz-input placeholder="请不要超过50个汉字" style="width: 325px;" maxlength="50" />
        </se>
        <se class="mb-sm">
            <nz-radio-group [(ngModel)]="formDate.isAudit">
                <label nz-radio [nzValue]="false" class="mt-sm">审核驳回系统通知</label>
                <label nz-radio [nzValue]="true" class="mt-sm">短信通知</label>
            </nz-radio-group>
        </se>
        <se class="mb-sm">
            <label for="">通知标题 : </label>
            <input nz-input placeholder="请不要超过20个汉字" style="width: 325px;" maxlength="20" />
        </se>
        <se class="mb-sm">
            <label for="">通知内容 : </label>
            <input nz-input placeholder="请不要超过50个汉字" style="width: 325px;" maxlength="50" />
        </se>
        <se class="mb-sm">
            <div class=" d-flex">
                <label for="">短信内容 : </label>
                <textarea nz-input rows="3" placeholder="【运多星】您的账号：XXXXXX。实名认证审核已被驳回，请重新上传"
                    style="width: 325px;margin-left: 14px;"></textarea>
            </div>
        </se>
    </div>
</ng-template>